<template>
  <div>
    <searchBox @searchChange="searchChange" />
    <div class="gva-table-box">
      <el-card>
        <el-row style="margin:30px auto">
          <el-col :span="4" />
          <el-col :span="4">
            <el-statistic
              title="活跃用户数"
              :value="active_user"
            />
          </el-col>

          <el-col :span="4">
            <el-statistic :value="add_user">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  新增用户数
                </div>
              </template>
              <!-- <template #suffix>/100</template> -->
            </el-statistic>
          </el-col>
          <el-col :span="4">
            <el-statistic :value="add_user == 0 ? 0 : (add_user/active_user*100).toFixed(2)">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  新增用户百分比
                </div>
              </template>
              <template #suffix>%</template>
            </el-statistic>
          </el-col>

          <el-col :span="4">
            <el-statistic
              title="累计用户数"
              :value="total_user"
            />
          </el-col>
          <el-col :span="4" />
        </el-row>

      </el-card>
    </div>
    <div class="gva-table-box">
      <lineChart
              ref="activeUser"
              :title="chartData.title" :legend="chartData.legend" :xAxis="chartData.xAxis" :series="chartData.series"
            />
    </div>

    <div class="gva-table-box">
      <div class="gva-btn-list"><el-text class="mx-1" size="large">详细数据</el-text></div>
      <el-table
        ref="multipleTable"
        style="width: 100%"
        tooltip-effect="dark"
        row-key="ID"
        :data="tableData"
        :height="tableData.length > 10 ? 500 : null"
        border
      >

        <el-table-column
          align="left"
          label="日期"
          prop="date"
        />
        <el-table-column
          align="left"
          label="活跃用户"
          prop="active_user"
        />
        <el-table-column
          align="left"
          label="新增用户"
          prop="add_user"
        />
        <el-table-column
          align="left"
          label="累计用户"
          prop="total_user"
        />
      </el-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useTransition } from '@vueuse/core'
import lineChart from '../../components/echarts/lineChart.vue'
import searchBox from '../../components/search/searchBox.vue'
import type { TabsPaneContext } from 'element-plus';
import { sumByKey } from '../../utils/fmtData'

import {
  getHugeList
} from '@/api/openApi'

// const source = ref(0)
// const outputValue = useTransition(source, {
//   duration: 1500,
// })
// source.value = 172000

const searchInfo = ref({})
const tableData = ref([])

let activeName = ref < string | number > ('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  activeName = ref(tab.paneName)
  const td = JSON.parse(JSON.stringify(tableData.value))
  tableData.value = []
  setTimeout(() => {
    tableData.value = td
  }, 200);
}

var searchChange = function(date) {
  searchInfo.value = date
  getTableData()
}

const active_user = ref(0)
const add_user = ref(0)
const total_user = ref(0)

const chartData = ref({
  xAxis: [],
  series: [{
    name: '活跃',
    type: 'line',
    data: []
  },{
    name: '新增',
    type: 'line',
    data: []
  },{
    name: '累计',
    type: 'line',
    data: []
  }],
  legend: ['活跃','新增','累计'],
  title: '用户数据'
})
const getTableData = function() {
  getHugeList({ type: 'user', ...searchInfo.value }).then(res => {
    if (res.code === 0) {
      let arr = []
      res.data.list.forEach(item =>{
        if (item.response == undefined){
          arr.push({
          date: item.date,
          response : {
            active_user: 0,
            add_user: 0,
            total_user: 0
          }
        })
        }else{
          arr.push({
          date: item.date,
          response : JSON.parse(item.response)
        })
        }
        
      })

      arr = sumByKey(arr,'date')

      const resultArr = []

      active_user.value = 0
      add_user.value = 0
      total_user.value = 0
      chartData.value.xAxis = []
    chartData.value.series[0].data = []
    chartData.value.series[1].data = []
    chartData.value.series[2].data = []
  
      arr.forEach(item => {
        resultArr.push({
          date: item.date,
          active_user: item.response.active_user,
          add_user: item.response.add_user,
          total_user: item.response.total_user
        })
        chartData.value.series[0].data.push(item.response.active_user)
        chartData.value.series[1].data.push(item.response.add_user)
        chartData.value.series[2].data.push(item.response.total_user)

        active_user.value += item.response.active_user
        add_user.value += item.response.add_user
        total_user.value = item.response.total_user

        chartData.value.xAxis.push(item.date)
      })

      tableData.value = resultArr
    }
  })
}
</script>
<style>
.el-col {
  text-align: center;
}
</style>
